<template>
	<view>
		<!-- header -->
		<MusicHeader title="搜索" :icon="true" />
		<!-- search -->
		<view class="searchpage-search" >
			<text class="iconfont icon-fangdajing"></text>
			<!-- @comfirm按回车触发搜索 -->
			<input type="text" placeholder="搜索歌曲" 
					v-model="searchWord" 
					@confirm="handletosearchword(searchWord)"
					@input="searchSuggestinput"
					@tap="deleteSearchword()"
					/>
			<text class="iconfont icon-guanbi" 
			v-show="searchtype!=1" 
			>
			</text>
		</view>
		<view class="container">	
			<scroll-view scroll-y="true" >
		<block v-if="searchtype===1">
			<!-- 历史搜索 -->
			<view class="search_history">
				
				<view class="search_history_head">
					<view>历史记录</view>
					<view class="iconfont icon-shanchu" 
					@tap="removeSearchHistory()"
					></view>
				</view>
				<view class="search_history_list">
					<view v-for="(item,index) in searchHistory" :key="index"  
					@tap="handletoword(item)"
					>{{item}}</view>
				</view>
			</view>
			<view class="search_hot">
				<view class="search_hot_head">
					热搜榜
				</view>
				<view class="search_hot_item" 
				v-for="(item,index) in searchHot" :key="index" 
				@tap="handletoword(item.searchWord)">
					<view class="search_hot_top">{{index+1}}</view>
					<view class="search_hot_word">
						<view>
							{{item.searchWord}}<image :src="item.iconUrl" mode=""></image>
						</view>
						<view>{{item.content}} </view>
					</view>
					<view class="search_hot_count">{{item.score}}</view>
				</view>
			</view>
		</block>
			<block v-if="searchtype===2">
				<view class="seaerchsong_item" v-for="(item,index) in searchlist" :key="index" @tap="searchtoplay(item.id)">
					<view class="seaerchsong_item_word">
						<view>{{item.name}}</view>
						<view>
							<image src="../../static/sq.jpg" mode=""></image>
							<image src="../../static/vip.jpg" mode=""></image>
							{{item.artists[0].name}}-{{item.album.name}}
						</view>
					</view>
					<view class="iconfont icon-bofang">
						
					</view>
				</view>
			</block>
			
		<block v-if="searchtype===3">
			<view class="search_suggest">
				<view class="search_suggest_head">搜索“{{searchWord}}”</view>
				<view 
					class="search_suggest_item"
					v-for="(item,index) in searchSuggests" :key="index"
					@tap="handletoword(item.keyword)"
				 >
					<view class="iconfont icon-fangdajing" ></view>
					<view>{{item.keyword}}</view>
				</view>
			</view>
		</block>	
			</scroll-view>
		
		</view>
	</view>
</template>

<script>
	import '../../common/iconfont.css'
	import MusicHeader from "../../components/MusicHeader/MusicHeader.vue"
	import {topList} from '../../common/api.js'
	import {searchHot ,searchWord , searchSuggest} from '../../common/api.js'
	export default {
		
		data() {
			return {
				issearch:false,
				searchHot:[],
				searchWord:'',
				searchHistory:[],
				searchtype : 1,
				searchlist:[],
				searchSuggests:[],
			}
		},
		onLoad(){
			searchHot().then((res=>{
				if(res[1].data.code =='200'){
					this.searchHot = res[1].data.data
				}
				// 拿出本地数据，赋值给searchHistory
				uni.getStorage({
				    key: 'searchHistory',
				    success:  (res)=> {
						this.searchHistory =res.data;
				    }
				});
					
				
			}))
		},
		methods: {
			// 点击把关键词复制给搜索热词
			handletoword(word){
				this.searchWord = word
				this.handletosearchword(word)
				this.getsearchList(word)
				
			},
			// 点击储存搜索历史
			handletosearchword(word){
				this.searchHistory.unshift(word)
				// es6去重，取消数组中相同的方法
				this.searchHistory = [...new Set(this.searchHistory)]
				// 使搜索历史不会超过10个
				if(this.searchHistory.length>10){
					this.searchHistory.length =10;
				}
				// 设置本地存储，刷新后历史记录还存在
				uni.setStorage({
					key:"searchHistory",
					data:this.searchHistory
				})
				this.getsearchList(word);
			},
			// 点击删除所有搜索历史
			removeSearchHistory(){
				uni.removeStorage({
				    key: 'searchHistory',
				    success:  (res)=> {
						this.searchHistory = [];
				    }
				});
			},
			//点击回车跳转到搜索结果页
			getsearchList(word){
				searchWord(word).then((res)=>{
					this.searchlist =res[1].data.result.songs;
					this.searchtype = 2;
					console.log(this.searchlist)
				})
			},
			// 点击搜索结果中歌曲播放跳转到播放详情页
			searchtoplay(songid){
				uni.navigateTo({
					url:"../songdedetailed/songdedetailed?songid="+songid
				})
			},
			// 清空输入框输入内容，并返回搜索热榜页
			deleteSearchword(){
				this.searchtype=1;
				this.searchWord ='';
				
			},
			// 同步搜索框，展示建议搜索关键词
			searchSuggestinput(ev){
				let value =ev.detail.value;
				
				if(!value){
					this.searchtype =1;
					return;
				}
				searchSuggest(value).then((res)=>{
					this.searchSuggests = res[1].data.result.allMatch;
					console.log(this.searchSuggests)
					this.searchtype = 3;
				})
			},
			
			
		}
	}
</script>

<style scoped>
	.container{
		height: calc(100vh - 280rpx );
	}
	/*search start */
	.searchpage-search{
		display: flex;
		align-items: center;
		height: 78rpx;
		margin: 0 34rpx 34rpx 34rpx;
		background-color:#f7f7f7 ;
		border-radius: 30rpx;
	}
	.searchpage-search text{
		margin-left:27rpx ;
		font-size: 45rpx;
	}
	.searchpage-search input{
		width: 480rpx;
		margin-left:27rpx ;
		font-size: 32rpx;
	}
	/*search end */
	/*search_history */
	.search_history_head{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 40rpx;
		font-weight: bold;
		margin: 25rpx 33rpx;
		display: flex;
		/* 两端点对其 */
		justify-content: space-between;
	}
	.search_history_list{
		display: flex;
		flex-wrap: wrap;
		margin: 0 40rpx;
		
	}
	.search_history_list view{
		display: flex;
		flex-wrap: wrap;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 40rpx;
		background-color: #f7f7f7;
		margin: 10rpx 20rpx;
		padding: 10rpx 20rpx;
	}
	/*search_history end */
	/* hot search */
	.search_hot{
		margin: 20rpx 33rpx;
	}
	.search_hot_head{
		font-size: 40rpx;
		font-weight: bold;
	}
	.search_hot_item{
		width: 680rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		
		
	}
	.search_hot_word{
		flex: 1;;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.search_hot_top{
		width:45rpx;
		color: #f53539;
		font-size: 30rpx;
		font-weight: bold;
	}
	.search_hot_word view:nth-child(1){
		font-size:30rpx ;
		font-weight: bold;
	}
	.search_hot_word  view:nth-child(1) image{
		margin: 0 10rpx;
		width: 50rpx;
		height: 30rpx;
	}
	.search_hot_word view:nth-child(2){
		font-size:20rpx ;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.search_hot_count{
		color: #999999;
		font-size: 20rpx;
	}
	
	
	/* hot search end */
	/* searchsong_item */
	.seaerchsong_item{
		margin: 50rpx 33rpx;
		border-bottom:2rpx solid #e4e2e3;
		display: flex;
		/* 两端点对其 */
		justify-content: space-between;
		align-items: center;
	}
	.seaerchsong_item .icon-bofang{
		font-size: 50rpx;
	}
	.seaerchsong_item_word view:nth-child(2){
		display: flex;
		align-items: center;
		color:#8a8a8d ;
		width: 550rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.seaerchsong_item_word view:nth-child(1){
		font-size: 30rpx;
		color: #295a75;
	}
	.seaerchsong_item_word view:nth-child(2) image{
		width: 40rpx;
		height: 25rpx;
		margin-right: 1rpx;
	}
	
	/* searchsong_item end */
	/* search_suggest_item */
	.search_suggest{
		margin: 0 58rpx;
	}
	.search_suggest_head{
		width: 663rpx;
		/* margin: 0 25rpx; */
		height:90rpx ;
		color:#0943a8 ;
		font-size: 27rpx;
		
	}
	.search_suggest_item{
		display: flex;
		align-items: center;
		margin: 40rpx;
	}
	.search_suggest_item view:nth-child(1){
		font-size:35rpx ;
		margin-right:20rpx ;
		color: #bdbdbd;
	}
	.search_suggest_item view:nth-child(2){
		font-size:28rpx ;
		color:#464646;
	}
	/* search_suggest_item end */
</style>
